<template>
    <div class="container yuan-container agency-list">

        <a-card title="机构列表">
            <div class="filter-panel">
                <div class="filter-list">
                    <span>机构名称：</span>
                    <a-input-search allowClear v-model="pageParams.name" placeholder="机构名称" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>创建时间：</span>
                    <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']" :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                </div>
                <!-- <div class="filter-list">
                    <span>机构类型：</span>
                    <a-select v-model="pageParams.institutionalType" @change="resetList" allowClear placeholder="机构类型">
                        <a-select-option value="中医馆">中医馆</a-select-option>
                        <a-select-option value="体检中心">体检中心</a-select-option>
                        <a-select-option value="社区医院">社区医院</a-select-option>
                        <a-select-option value="养老中心">养老中心</a-select-option>
                        <a-select-option value="口腔门诊">口腔门诊</a-select-option>
                    </a-select>
                </div> -->
                <div style="float:right" class="filter-list">
                    <a-button type="primary" @click="add" v-if="$checkPer(['organizationAdd'])">下载导入模板</a-button>
                    <a-button type="warning" @click="add" v-if="$checkPer(['organizationAdd'])">导入</a-button>
                    <a-button type="success" @click="add" v-if="$checkPer(['organizationAdd'])">新增机构</a-button>
                </div>

            </div>
            <div class="filter-panel">
                <div class="filter-row">
                    <span class="filter-row-title">机构类型：</span>
                    <span class="filter-row-list" :class="pageParams.institutionalType===''&&'c-primary'"
                        @click="clickInstitutionalType('')">全部</span>
                    <span class="filter-row-list" :class="pageParams.institutionalType==='中医馆'&&'c-primary'"
                        @click="clickInstitutionalType('中医馆')">中医馆</span>
                    <span class="filter-row-list" :class="pageParams.institutionalType==='体检中心'&&'c-primary'"
                        @click="clickInstitutionalType('体检中心')">体检中心</span>
                    <span class="filter-row-list" :class="pageParams.institutionalType==='社区医院'&&'c-primary'"
                        @click="clickInstitutionalType('社区医院')">社区医院</span>
                    <span class="filter-row-list" :class="pageParams.institutionalType==='养老中心'&&'c-primary'"
                        @click="clickInstitutionalType('养老中心')">养老中心</span>
                    <span class="filter-row-list" :class="pageParams.institutionalType==='口腔门诊'&&'c-primary'"
                        @click="clickInstitutionalType('口腔门诊')">口腔门诊</span>
                </div>
            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id+'_'+i" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <template v-if="$checkPer(['organizationEdit'])">
                                <a-button type="primary" @click="clickEdit(record)">编辑</a-button>
                                <a-popconfirm okText="确定" cancelText="取消" title="确定禁用吗？" @confirm="clickDisable(record)"
                                    v-if="record.status===1">
                                    <a-button type="warning">禁用</a-button>
                                </a-popconfirm>
                                <a-popconfirm okText="确定" cancelText="取消" title="确定启用吗？" @confirm="clickOpen(record)" v-else>
                                    <a-button type="success">启用</a-button>
                                </a-popconfirm>

                                <!-- <a-button type="danger" @click="clickEdit(record)">删除</a-button> -->
                                <a-button type="primary-empty-btn" @click="clickFn(record)">功能管理</a-button>
                            </template>

                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo" :isShow="isShow"
            @resetList="resetList" />
        <AgeFnVue :visible="fnVisible" @closeModal="() => fnVisible = false" :editInfo="editInfo" />
    </div>
</template>
<script lang="ts">
import platformApi from "@/api/platformApi";
import { format } from "@/utils";
import { h } from "vue";
import { Component, Vue } from "vue-property-decorator";
import AgeFnVue from "./ageFn.vue";
import DetailVue from "./detail.vue";
@Component({
    name: "tpl",
    components: { DetailVue, AgeFnVue },
})
export default class extends Vue {
    loading = false;
    pageList = [{ name: "测试商品" }];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    pageParams: any = {
        keywords: "",
        institutionalType: "",
    };
    columns = [
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "机构名称",
        },
        {
            align: "center",
            dataIndex: "institutionalType",
            key: "institutionalType",
            title: "机构类型",
        },
        {
            align: "center",
            dataIndex: "storeType",
            key: "storeType",
            title: "自营/加盟",
            customRender: (text: string, record: any, index: number) => {
                return record.storeType === "ZY" ? "自营" : "加盟";
            },
        },
        {
            align: "center",
            dataIndex: "hospitalScale",
            key: "hospitalScale",
            title: "医馆规模(人)",
        },
        {
            align: "center",
            dataIndex: "createTime",
            key: "createTime",
            title: "添加时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.createTime);
            },
        },
        {
            align: "center",
            dataIndex: "pageTable6",
            key: "pageTable6",
            title: "状态",
            customRender: (text: string, record: any, index: number) => {
                const statusList = [
                    { id: 0, name: "禁用", class: "c-danger" },
                    { id: 1, name: "启用", class: "c-success" },
                ];
                const findData = statusList.find((item) => {
                    return item.id === record.status;
                });
                if (findData) {
                    return h("span", { class: findData.class }, findData.name);
                }
                return "";
            },
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 350,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await platformApi.findAllStore({
                ...this.pageParams,
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
            });
            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    clickInstitutionalType(type) {
        this.pageParams.institutionalType = type;
        this.resetList();
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }

    isShow = false;
    detailVisible = false;
    add() {
        this.editInfo = {};
        this.isShow = false;
        this.detailVisible = true;
    }
    editInfo = {};
    async clickEdit(item) {
        this.loading = true;
        try {
            const res = await platformApi.findAllStore({ id: item.id });
            this.isShow = false;
            this.editInfo = { ...res.data, id: item.id };
            this.detailVisible = true;
        } finally {
            this.loading = false;
        }
    }
    async clickDisable(item) {
        this.loading = true;
        try {
            const res = await platformApi.addOrganization({
                id: item.id,
                status: 0,
            });
            this.$message.success("禁用成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    async clickOpen(item) {
        this.loading = true;
        try {
            const res = await platformApi.addOrganization({
                id: item.id,
                status: 1,
            });
            this.$message.success("启用成功");
            this.getList();
        } finally {
            this.loading = false;
        }
    }
    fnVisible = false;
    async clickFn(item) {
        this.loading = true;
        try {
            const res = await platformApi.findAllStore({ id: item.id });
            this.editInfo = { ...res.data, id: item.id };
            this.fnVisible = true;
        } finally {
            this.loading = false;
        }
    }

    async clickDelete(item) {
        this.loading = true;
        try {
            // await api.deleteResourceAbutment(item.id);
            // this.$message.success("删除成功");
            // this.getList();
        } finally {
            this.loading = false;
        }
    }
    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.pageParams.createStartTime = arr[0];
        this.pageParams.createEndTime = arr[1];
        this.resetList();
    }
}
</script>
<style scoped lang="scss">
.agency-list {
}
</style>
